<template>
  <view class="quick-actions">
    <view class="action-item" @click="$emit('action', 'cart')">
      <view class="action-icon">🛒</view>
      <text class="action-text">购物车</text>
    </view>
    <view class="action-item" @click="$emit('action', 'profile')">
      <view class="action-icon">📋</view>
      <text class="action-text">我的订单</text>
    </view>
    <view class="action-item" @click="$emit('action', 'new')">
      <view class="action-icon">📦</view>
      <text class="action-text">新品上架</text>
    </view>
    <view class="action-item" @click="$emit('action', 'coupon')">
      <view class="action-icon">🎫</view>
      <text class="action-text">领券中心</text>
    </view>
    <view class="action-item" @click="$emit('action', 'group')">
      <view class="action-icon">👥</view>
      <text class="action-text">团购</text>
    </view>
    <view class="action-item" @click="$emit('action', 'seckill')">
      <view class="action-icon">⚡</view>
      <text class="action-text">秒杀</text>
    </view>
    <view class="action-item" @click="$emit('action', 'discount')">
      <view class="action-icon">🎁</view>
      <text class="action-text">满减满赠</text>
    </view>
    <view class="action-item" @click="$emit('action', 'categories')">
      <view class="action-icon">☰</view>
      <text class="action-text">全部分类</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'QuickActions',
  emits: ['action']
};
</script>

<style scoped lang="scss">
@import "../../../static/common.scss";

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
}

.action-item {
  @include flex-column;
  align-items: center;
  gap: 15rpx;
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: #ff6b35;
  border-radius: 20rpx;
  @include flex-center;
  font-size: 40rpx;
  color: white;
}

.action-text {
  font-size: 24rpx;
  color: #333;
}
</style>